<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0
			}

			#small-box {
				width: 200px;
				height: 200px;
				background: url(img/0.jpg) no-repeat;
				background-size: 200px 200px;
				position: absolute;
				left: 100px;
				top: 200px;
			}

			#mask {
				width: 100px;
				height: 100px;
				background-color: #FF69B4;
				opacity: 0.5;
				position: absolute;
				display: none;
				cursor: move;
			}

			#big-box {
				width: 400px;
				height: 400px;
				background-image: url(img/0.jpg);
				background-size: 800px 800px;
				position: absolute;
				left: 400px;
				top: 200px;
				display: none;
			}

			#img {
				position: absolute;
				width: 350px;
				left: 20px;
				top: 450px;
			}

			#img ul {
				display: flex;
				width: 350px;
				flex-wrap: wrap;
			}

			#img ul li {
				width: 70px;
				height: 70px;
				list-style: none;
			}

			#img ul li img {
				width: 70px;
				height: 70px;
			}
		</style>
	</head>
	<body>
		<div id="small-box">
			<div id="mask">

			</div>
		</div>
		<div id="big-box">

		</div>
		<div id="img">
			<ul>
				<li><img src="img/0.jpg"></li>
				<li><img src="img/1.jpg"></li>
				<li><img src="img/2.jpg"></li>
				<li><img src="img/3.jpg"></li>
				<li><img src="img/4.jpg"></li>
			</ul>
		</div>
	</body>
</html>
<script src="js/tools.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	let oSmallBox = document.querySelector("#small-box");
	let oMask = document.querySelector("#mask");
	let oBigBox = document.querySelector("#big-box");
	let oLis = document.querySelectorAll("li");
	new Magnifier(oSmallBox, oMask, oBigBox, oLis);
</script>
